// 整合函数——登录校验
checkLogin()

// 整合函数—— 渲染用户名
renderUsername()

// 整合函数——退出登录逻辑
registerLogout()

// 抽取函数——获取学员数据
async function renderStudentInfo() {
    const res = await axios.get('/students')
        // console.log(res) // 数组

    const html = res.data.map(v => {
        const { name, age, gender, group, hope_salary, salary, province, city, area, id } = v
        return `
             <tr>
                  <td>${name}</td>
                  <td>${age}</td>
                  <td>${gender===0?'男':'女'}</td>
                  <td>第${group}组</td>
                  <td>${hope_salary}</td>
                  <td>${salary}</td>
                  <td>${province+city+area}</td>
                  <td data-id="${id}">
                       <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                       <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                  </td>
             </tr> `
    }).join('')
    document.querySelector('.list').innerHTML = html
    document.querySelector('.total').innerHTML = res.data.length
}
renderStudentInfo()

// 显示弹框
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)
document.querySelector('#openModal').addEventListener('click', () => {
    // 修改标题
    document.querySelector('.modal-title').innerText = '添加学员'
        // 表单重置
    document.querySelector('#form').reset()
        // 清空籍贯（城市、地区）
    citySelect.innerHTML = '<option value="">--城市--</option>'
    areaSelect.innerHTML = '<option value="">--地区--</option>'
        // 删除自定义属性  属性保存的位置 modalDom
    modalDom.dataset.id = ''

    modal.show()
})

// 省市区的联动
const proSelect = document.querySelector('[name = "province"]')
const citySelect = document.querySelector('[name = "city"]')
const areaSelect = document.querySelector('[name = "area"]')
async function initSelect() {
    // 省数据的获取 + 渲染
    const proRes = await axios.get('/api/province')
        // console.log(proRes)
    const proHtml = proRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')
    proSelect.innerHTML = `<option value="">--省份--</option>${proHtml}`

    // 市数据的获取 + 渲染
    // 不需要页面一打开就获取数据 ， 给proSelect 注册change事件
    proSelect.addEventListener('change', async() => {
        const cityRes = await axios.get('/api/city', {
            params: {
                pname: proSelect.value
            }
        })
        const cityHtml = cityRes.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('')
        citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`

        // TODO： 一会儿要清空地区标签的内容，否则会有Bug  停留在上一次的状态
        areaSelect.innerHTML = `<option value="">--地区--</option>`
    })

    // 区数据的获取 + 渲染
    citySelect.addEventListener('change', async() => {
        const areaRes = await axios.get('/api/area', {
            params: {
                pname: proSelect.value,
                cname: citySelect.value
            }
        })
        const areaHtml = areaRes.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('')
        areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    })
}
initSelect()

// 信息管理——新增学员    
document.querySelector('#submit').addEventListener('click', () => {
    if (modalDom.dataset.id) {
        // 后续 调用保存修改的函数
        saveEdit()
    } else { // 调用新增学员的函数
        addStudent()
    }
})

// 新增 和 编辑 弹出的是同一个弹窗 所以封装函数

async function addStudent() {
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })
        // console.log(data) // 返回 对象

    // 转换 对象里的格式  与 接口要求一致
    //  字符串 转为 数字
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
        // console.log(data)

    try {
        const res = await axios.post('/students', data)
        showToast(res.message)
        renderStudentInfo()
    } catch (error) {
        // 新增失败
        // console.dir(error)
        showToast(error.response.data.message)
    }
    modal.hide()
}


// 删除学员——绑定事件
document.querySelector('.list').addEventListener('click', (e) => {
    // 点了删除标签 调用对应的函数
    if (e.target.classList.contains('bi-trash')) {
        // console.log(e.target.parentNode.parentNode.dataset.id)
        const id = e.target.parentNode.parentNode.dataset.id
        delStudent(id)
    }

    // 点了编辑标签，调用对应的函数
    if (e.target.classList.contains('bi-pen')) {
        const id = e.target.parentNode.parentNode.dataset.id
        editStudent(id)
    }

})

// 抽取删除数据的函数
async function delStudent(id) {
    // console.log('点了删除')
    // console.log(id)
    // 注意: 删除接口, 一般后台不会返回响应体  所以这里就不接收了
    await axios.delete(`/students/${id}`)

    // 重新渲染
    renderStudentInfo()
}

// 抽取编辑数据的函数
async function editStudent(id) {
    // console.log('点了编辑', id)
    const res = await axios.get(`/students/${id}`)

    // 修改标题
    document.querySelector('.modal-title').innerHTML = '修改学员'

    // 设置输入框  （姓名、年龄、组号、期望薪资、就业薪资）
    // 属性名数组
    const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
    keyArr.forEach(key => {
        document.querySelector(`[name=${key}]`).value = res.data[key]
    })

    // 设置性别 0男, 1女
    const { gender } = res.data
        // 伪数组 [男checkbox,女checkbox]  伪数组的索引巧号是数据的值是相同的
    const chks = document.querySelectorAll('[name=gender]')
    chks[gender].checked = true

    // 设置籍贯
    const { province, city, area } = res.data

    // 设置省（设置select标签的value属性，对应的option会被选中）
    proSelect.value = province

    // 设置市: 不能直接设置value值， 得先去调接口
    const cityRes = await axios.get('/api/city', {
        params: {
            pname: province
        }
    })

    const cityHtml = cityRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')

    citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
    citySelect.value = city

    // 设置区
    const areaRes = await axios.get('/api/area', {
        params: {
            pname: province,
            cname: city
        }
    })
    const areaHtml = areaRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')
    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    areaSelect.value = area

    // 弹出编辑窗口 
    modal.show()

    // 不需要绑定点击事件——新增学员的时候已经注册过
    // 保存学员id 用来区分 新增(data-id 没有值) 或编辑(data-id 有值)
    modalDom.dataset.id = id
}

// 抽取函数——保存修改
async function saveEdit() {
    // console.log('保存修改')
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })

    // 修改格式 与 接口一致
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    try {
        // 修改成功
        const saveRes = await axios.put(`/students/${modalDom.dataset.id}`, data)
        showToast(saveRes.message)
        renderStudentInfo()
    } catch (error) {
        // 修改失败
        // console.dir(error)
        showToast(error.response.data.message)
    }
    modal.hide()
}